<template>
  <div>
    <el-input
      v-model="params.username"
      placeholder="用户名"
      style="width: 200px"
    />
    <el-button type="primary" @click="search">搜索</el-button>
    <el-button @click="reset">重置</el-button>

    <el-table :data="data" border stripe :loading="loading">
      <el-table-column prop="id" label="ID" />
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="email" label="邮箱" />
    </el-table>

    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :total="total"
      :page-sizes="[10, 20, 50]"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      style="margin-top: 20px; justify-content: flex-end"
    />
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { usePagination } from '@/hooks/usePagination'
// import { getUserList } from '@/api/user' // 假设你封装了 API
const getUserList = () => {}

// 初始化搜索参数
const params = ref({
  username: '',
})

// 使用封装的分页 Hook
const {
  data,
  total,
  currentPage,
  pageSize,
  loading,
  queryParams,
  fetchData,
  handleCurrentChange,
  handleSizeChange,
  reset: resetPagination
} = usePagination(getUserList, params.value)

// 同步 params 到 queryParams（usePagination 内部的响应式对象）
watch(
  params.value,
  (newVal) => {
    Object.assign(queryParams, newVal)
  },
  { deep: true }
)

// 搜索
const search = () => {
  // Object.assign(queryParams, params.value)
  fetchData()
}

// 重置搜索表单 + 分页
const reset = () => {
  params.value.username = ''
  resetPagination()
}
</script>
